<template>
  <div class="pc">
    <el-tag effect="dark" type="danger" v-if="msg">{{ msg }}</el-tag>
    <div v-if="detail">
      <el-row>
        <el-col :offset="20">
          <img :src="url" style="margin-top: 30px" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-button
            type="primary"
            @click="print"
            :disabled="isDisabled"
            :loading="isLoading"
            >打印</el-button
          >

          <el-button round type="primary" @click="open_addDialog('内存')"
            >添加内存</el-button
          >
          <el-button round type="primary" @click="open_addDialog('硬盘')"
            >添加硬盘</el-button
          >
        </el-col>
        <el-col :span="12">
          <div>
            <el-tag
              style="margin-right: 20px"
              v-for="(value, key, index) in typeAndNums"
              :key="index"
              effect="plain"
              type="success"
            >
              {{ key + " " + value }}
            </el-tag>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">键 </el-col>
        <el-col :span="16"> 值 </el-col>
        <el-col :span="4"> 操作 </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> ID </el-col>
        <el-col :span="16">
          {{ detail.pcVo.pcId }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> PO </el-col>
        <el-col :span="16">
          {{ detail.pcVo.poId }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="open_dialogForm('PO')"
            circle
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> SN</el-col>
        <el-col :span="16">
          {{ detail.pcVo.pcSn }}
        </el-col>
        <el-col :span="4"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> 类型 </el-col>
        <el-col :span="16">
          {{ detail.pcVo.pcType }}
        </el-col>
        <el-col :span="4"> </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> 品牌 </el-col>
        <el-col :span="16">
          <span :class="{ red: detail.pcVo.pcBrand == 'UNKNOWN' }">{{
            detail.pcVo.pcBrand
          }}</span>
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="open_dialogForm('品牌')"
            circle
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> 型号</el-col>
        <el-col :span="16">
          <span :class="{ red: detail.pcVo.pcModel == 'UNKNOWN' }">
            {{ detail.pcVo.pcModel }}</span
          >
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('型号')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4"> CPU</el-col>
        <el-col :span="16">
          <span v-if="detail.pcVo.cpuCount > 1" style="color: red">
            {{ detail.pcVo.cpuCount }}*
          </span>
          {{ detail.pcVo.modelCpuName }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('CPU')"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteCPU"
          ></el-button>
        </el-col>
      </el-row>
      <!-- 动态 -->
      <el-row v-for="(item, index) in detail.diskVo2s" :key="item.diskId">
        <el-col :span="4"> 硬盘{{ index + 1 }}</el-col>
        <el-col :span="16">
          {{ item.diskSn }}/<span style="color: red">{{ item.diskType }}</span
          >/<span style="color: red">{{ item.diskCapacity }}</span
          >/{{ item.diskInterface }}/{{ item.diskRate }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteItem(item.id, 'disk')"
          ></el-button>
        </el-col>
      </el-row>

      <el-row v-for="(item, index) in detail.memoryVo2s" :key="item.memoryId">
        <el-col :span="4"> 内存{{ index + 1 }}</el-col>
        <el-col :span="16">
          {{ item.memoryGeneration }}/
          <span style="color: red">{{ item.memorySize }}</span
          >/{{ item.memoryType }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteItem(item.id, 'memory')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row v-for="(item, index) in detail.gpuVo2s" :key="item.memoryId">
        <el-col :span="4"> 显卡{{ index + 1 }}</el-col>
        <el-col :span="16">
          {{ item.gpuModel }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteItem(item.id, 'gpu')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">品质</el-col>
        <el-col :span="16">
          {{ detail.pcVo.quality }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('品质')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">成色</el-col>
        <el-col :span="16">
          {{ detail.pcVo.deviceCondition }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('成色')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">状态</el-col>
        <el-col :span="16">{{ detail.pcVo.passed ? "PASS" : "FAIL" }}</el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('状态')"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">备注</el-col>
        <el-col :span="16">
          {{ detail.pcVo.mark }}
        </el-col>
        <el-col :span="4">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="open_dialogForm('备注')"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="deleteMark"
          ></el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">检测员</el-col>
        <el-col :span="16" v-if="userArr">
          {{
            userArr
              ? userArr.filter((item) => {
                  return item.userUser.id == detail.pcVo.userId;
                })[0].userUser.username
              : ""
          }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-button
            type="primary"
            @click="print"
            :disabled="isDisabled"
            :loading="isLoading"
            >打印</el-button
          >
        </el-col>
        <el-col>
          <div>
            <el-tag
              style="margin-right: 20px"
              v-for="(value, key, index) in typeAndNums"
              :key="index"
              effect="plain"
              type="success"
            >
              {{ key + " " + value }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      :title="'修改' + title"
      :visible.sync="dialogFormVisible"
      width="40%"
      @close="closeUpdateDialog"
    >
      <el-form ref="form" label-width="80px">
        <!-- PO -->
        <el-form-item label="PO" v-if="title == 'PO'">
          <el-select
            placeholder="请选择PO"
            filterable
            v-model="pcUpdate.pcVo.poId"
          >
            <el-option
              v-for="item in pos"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" v-if="title == '品牌' || title == '型号'">
          <el-select
            placeholder="请选择品牌"
            filterable
            v-model="pcUpdate.pcVo.pcBrand"
            @change="handleChangeBrand"
          >
            <el-option
              v-for="item in brands"
              :key="item.brand"
              :label="item.brand"
              :value="item.brand"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 型号 -->
        <el-form-item label="型号" v-if="title == '型号' || title == '品牌'">
          <el-select
            placeholder="请选择型号"
            filterable
            v-model="pcUpdate.pcVo.pcModel"
          >
            <el-option
              v-for="item in models"
              :key="item.model"
              :label="item.model"
              :value="item.model"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- cpu -->

        <el-form-item v-if="title == 'CPU'">
          <el-button type="success" @click="addCPU">增加一块CPU</el-button>
        </el-form-item>
        <el-form-item label="CPU" v-if="title == 'CPU'">
          <el-select
            placeholder="请选择CPU"
            filterable
            v-model="pcUpdate.pcVo.modelCpuId"
          >
            <el-option
              v-for="item in cpus"
              :key="item.id"
              :label="item.model"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 品质 -->
        <el-form-item label="品质" v-if="title == '品质'">
          <el-radio-group v-model="pcUpdate.pcVo.quality">
            <el-radio label="A">A</el-radio>
            <el-radio label="B">B</el-radio>
            <el-radio label="C">C</el-radio>
            <el-radio label="D">D</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 内存 -->
        <el-form-item label="内存" v-if="title == '内存'">
          <el-select placeholder="请选择内存" filterable>
            <el-option
              v-for="item in memories"
              :key="item.brand"
              :label="item.brand"
              :value="item.brand"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 成色 -->
        <el-form-item label="成色" v-if="title == '成色'">
          <el-radio-group v-model="pcUpdate.pcVo.deviceCondition">
            <el-radio label="报废">报废</el-radio>
            <el-radio label="七成新">七成新</el-radio>
            <el-radio label="八成新">八成新</el-radio>
            <el-radio label="九成新">九成新</el-radio>
            <el-radio label="九五新">九五新</el-radio>
            <el-radio label="全新">全新</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item label="状态" v-if="title == '状态'">
          <el-radio-group v-model="pcUpdate.pcVo.passed">
            <el-radio :label="true">PASS</el-radio>
            <el-radio :label="false">FAIL</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 备注 -->
        <el-form-item v-if="title == '备注'">
          <el-checkbox-group size="small" v-model="markGroup">
            <el-checkbox
              :label="item"
              border
              v-for="(item, index) in marks"
              :key="index"
              >{{ item }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注" v-if="title == '备注'">
          <el-input v-model="mark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePC">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增内存或的dialog -->
    <el-dialog
      :visible.sync="addDialogVisible"
      :title="'添加' + addDialogTitle"
      @close="addDialogClose"
    >
      <el-form>
        <div v-if="addDialogTitle == '内存'">
          <el-form-item label="内存数量">
            <el-select
              v-model="memoryCount"
              @change="addSelectChange"
              style="width: 200px"
            >
              <el-option
                v-for="(n, index) in 5"
                :key="n + '内存'"
                :label="index"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="内存"
            v-for="(item, index) in memoryCount"
            :key="index"
          >
            <el-select
              v-model="memorys[index]"
              style="width: 200px"
              placeholder="请选择型号"
              filterable
            >
              <el-option
                v-for="item in memoryOptions"
                :key="item.id"
                :label="item.model"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <div v-if="addDialogTitle == '硬盘'">
          <!-- 新添加的硬盘 -->
          <el-form-item label="硬盘数量">
            <el-select
              v-model="diskCount"
              @change="addSelectChange"
              style="width: 200px"
            >
              <el-option
                v-for="(n, index) in 5"
                :key="n + '内存'"
                :label="index"
                :value="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="硬盘"
            v-for="(item, index) in diskCount"
            :key="index"
          >
            <el-select
              v-model="disks[index]"
              style="width: 200px"
              placeholder="请选择型号"
              filterable
            >
              <el-option
                v-for="item in disksOptions"
                :key="item.id"
                :label="item.model"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button
            type="primary"
            @click="addBtnClick"
            :disabled="addBtnDisabled"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import QRCode from "qrcode";
import {
  reqGetPcDetail,
  reqGetDevices,
  reqGetUsersPage,
  reqGetPos,
  reqGetBrands,
  reqGetModels,
  reqGetCPUs,
  reqUpdatePC,
  reqDeleteItem,
  reqGetCheckMarks,
  reqPcPrint,
  reqGetTypeAndNumByPo,
  reqAddDisk,
  reqAddMemory,
  reqGetSelectTypes,
} from "../utils/pc_api";
export default {
  name: "pc",
  created() {
    this.id = this.$route.query.id;
    this.msg = this.$route.query.msg;
    this.generateCode();

    this.getUsers();
    this.getPcDetail();
    this.getPos();
    //this.getCheckMarks();
  },
  mounted() {},
  data() {
    return {
      msg: "",
      typeAndNums: null,
      isDisabled: false,
      isLoading: false,
      //传过来的id
      id: null,
      title: "",
      //所有用户
      userArr: [],
      //查询详情
      detail: null,
      dialogFormVisible: false,
      pos: null,
      devices: null,
      brands: null,
      cpus: null,
      //型号
      models: null,
      // 内存
      memories: null,
      // type_id为笔记本
      type_id: null,
      //显卡
      gpus: null,
      pcUpdate: null,
      marks: null,
      mark: null,
      markGroup: [],
      addDialogVisible: false, //添加内存或硬盘的
      addDialogTitle: "",
      diskCount: 0, //硬盘数量
      disks: [],
      disksOptions: null,
      memoryCount: 0,
      memorys: [],
      memoryOptions: null,
      addBtnDisabled: false,
    };
  },
  methods: {
    //根据po获取对应类型和数量
    async getTypeAndNumByPo() {
      if (!this.detail.pcVo.poId) {
        this.$message.error("请选择PO");
        return;
      }
      let res = await reqGetTypeAndNumByPo(this.detail.pcVo.poId);
      if (res.data.code == 0) {
        this.typeAndNums = res.data.data;
      } else {
        this.$message.error(res.data.msg);
      }
    },
    //生成二维码
    generateCode() {
      let self = this;
      QRCode.toDataURL(
        this.id,
        { errorCorrectionLevel: "H", version: 2 },
        function (err, url) {
          if (!err) {
            self.url = url;
          }
          console.log(err);
        }
      );
    },
    async print() {
      if (
        this.detail.pcVo.pcBrand == "UNKNOWN" ||
        this.detail.pcVo.pcModel == "UNKNOWN"
      ) {
        this.$message.error("品牌或者型号不能为UNKNOWN,请先修改再打印");
        return;
      }
      this.isDisabled = true;
      this.isLoading = true;
      let res = await reqPcPrint(this.id, this.detail.pcVo.userId);
      if (res.data.code == 0) {
        this.$message({
          message: "打印成功",
          type: "success",
        });
      } else {
        this.$message.error(res.data.msg);
      }
      setTimeout(() => {
        this.isDisabled = false;
        this.isLoading = false;
      }, 3000);
    },
    //监听修改对话框关闭
    closeUpdateDialog() {
      this.pcUpdate = this._.cloneDeep(this.detail);
      this.markGroup = [];
      this.mark = "";
    },
    async handleChangeBrand(val) {
      let type_id = this.devices.filter((item) => {
        return item.typeName == this.detail.deviceTypeName;
      })[0].typeId;

      let res = await reqGetModels(type_id, val);
      if (res.data.code == 0) {
        this.models = res.data.data;
        this.pcUpdate.pcVo.pcModel = null;
      }
    },
    // 删除备注
    deleteMark() {
      this.$confirm("此操作将删除备注, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            pcId: this.detail.pcVo.pcId,
            mark: "",
            pcType: this.detail.pcVo.pcType,
          };
          let res = await reqUpdatePC(data);
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getPcDetail();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取备注
    async getCheckMarks() {
      try {
        let type_id = this.devices.filter((item) => {
          return item.typeName == this.detail.pcVo.pcType;
        })[0].typeId;
        let res = await reqGetCheckMarks(type_id);
        if (res.data.code == 0) {
          this.marks = res.data.data;
        }
      } catch (err) {
        this.marks = [];
      }
    },
    //删除某一项
    async deleteItem(deviceId, typeName) {
      this.$confirm("确认要删除嘛?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqDeleteItem(deviceId, typeName);
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getPcDetail();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //增加一块CPU
    async addCPU() {
      let data = {
        pcId: this.detail.pcVo.pcId,
        modelCpuId: this.detail.pcVo.modelCpuId,
        cpuCount: this.detail.pcVo.cpuCount + 1,
        pcType: this.detail.pcVo.pcType,
        cpuChangeCode: 1,
      };
      let res = await reqUpdatePC(data);
      if (res.data.code == 0) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.getPcDetail();
      } else {
        this.$message.error(res.data.msg);
      }
    },
    //删除CPU
    deleteCPU() {
      this.$confirm("确认要删除嘛?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            pcId: this.detail.pcVo.pcId,
            modelCpuId: 0,
            cpuCount: 0,
            pcType: this.detail.pcVo.pcType,
            cpuChangeCode: 0,
          };
          let res = await reqUpdatePC(data);
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getPcDetail();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //更新PC
    async updatePC() {
      let data = null;
      if (this.title == "PO") {
        if (!this.pcUpdate.pcVo.poId) {
          this.$message.error("请选择PO");
          return;
        }
        data = {
          pcId: this.detail.pcVo.pcId,
          poId: this.pcUpdate.pcVo.poId,
          pcType: this.detail.pcVo.pcType,
        };
      }
      if (this.title == "备注") {
        let mark = "";
        if (this.markGroup.length) {
          this.markGroup.forEach((item, index) => {
            mark += item;
            if (index != this.markGroup.length - 1) {
              mark += ",";
            }
          });
        }
        if (this.mark) {
          mark += this.mark;
        }

        if (this.markGroup.length == 0 && !this.mark) {
          this.$message({
            message: "请至少选择一项",
            type: "warning",
          });
          return;
        }
        data = {
          pcId: this.detail.pcVo.pcId,
          mark: mark,
          pcType: this.detail.pcVo.pcType,
        };
      }
      if (this.title == "CPU") {
        if (!this.pcUpdate.pcVo.modelCpuId) {
          this.$message.error("请选择CPU");
          return;
        }
        data = {
          modelCpuId: this.pcUpdate.pcVo.modelCpuId,
          pcId: this.detail.pcVo.pcId,
          pcType: this.detail.pcVo.pcType,
          cpuChangeCode: 2,
        };
      }
      if (this.title == "品质") {
        if (!this.pcUpdate.pcVo.quality) {
          this.$message.error("请选择品质");
          return;
        }
        data = {
          pcId: this.detail.pcVo.pcId,
          quality: this.pcUpdate.pcVo.quality,
          pcType: this.detail.pcVo.pcType,
        };
      }
      if (this.title == "成色") {
        if (!this.pcUpdate.pcVo.deviceCondition) {
          this.$message.error("请选择成色");
          return;
        }
        data = {
          pcId: this.detail.pcVo.pcId,
          deviceCondition: this.pcUpdate.pcVo.deviceCondition,
          pcType: this.detail.pcVo.pcType,
        };
      }
      if (this.title == "状态") {
        if (this.pcUpdate.pcVo.passed == null) {
          this.$message.error("请选择状态");
          return;
        }
        data = {
          pcId: this.detail.pcVo.pcId,
          passed: this.pcUpdate.pcVo.passed,
          pcType: this.detail.pcVo.pcType,
        };
      }
      if (this.title == "品牌" || this.title == "型号") {
        if (!this.pcUpdate.pcVo.pcModel || !this.pcUpdate.pcVo.pcBrand) {
          this.$message.error("品牌与型号必须都有值");
          return;
        }

        data = {
          pcId: this.detail.pcVo.pcId,
          pcModel: this.pcUpdate.pcVo.pcModel,
          pcBrand: this.pcUpdate.pcVo.pcBrand,
          pcType: this.detail.deviceTypeName,
        };
      }
      let res = await reqUpdatePC(data);
      if (res.data.code == 0) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.dialogFormVisible = false;
        this.getPcDetail();
      } else {
        this.$message.error(res.data.msg);
      }
    },
    //打开对话框
    open_dialogForm(item) {
      this.title = item;
      this.mark = this.pcUpdate.pcVo.mark;
      if (this.pcUpdate.pcVo.modelCpuId == 0) {
        this.pcUpdate.pcVo.modelCpuId = null;
      }
      this.dialogFormVisible = true;
    },
    //获取pc详情
    async getPcDetail() {
      let res = await reqGetPcDetail(this.id);
      if (res.data.code == 0) {
        this.detail = res.data.data;
        this.pcUpdate = this._.cloneDeep(this.detail);
        this.getDevices();
        console.log(this.detail.pcVo.poId);
        this.getTypeAndNumByPo();
      }
    },
    //所有设备
    async getDevices() {
      let res = await reqGetDevices();
      if (res.data.code == 0) {
        this.devices = res.data.data;
        this.getBrands();
        this.getCPUs();
        this.getGpus();
        //this.getMemories();
        this.getTypes();
        this.getCheckMarks();
      }
    },
    //所有用户
    async getUsers() {
      let res = await reqGetUsersPage();
      if (res.data.code == 0) {
        this.userArr = res.data.data;
      }
    },
    //所有po
    async getPos() {
      let res = await reqGetPos({ poStatusList: [] });
      if (res.data.code == 0) {
        this.pos = res.data.data;
      }
    },
    //获取品牌
    async getBrands() {
      //笔记本
      let id = this.devices.filter((item) => {
        return item.typeName == this.detail.deviceTypeName;
      })[0].typeId;

      let res = await reqGetBrands(id);
      if (res.data.code == 0) {
        this.brands = res.data.data;
      }
    },
    // GPU
    async getGpus() {
      let id = this.devices.filter((item) => {
        return item.typeName == "显卡";
      })[0].typeId;

      let res = await reqGetBrands(id);
      if (res.data.code == 0) {
        this.gpus = res.data.data;
      }
    },
    // 获取内存
    async getMemories() {
      let id = this.devices.filter((item) => {
        return item.typeName == "内存";
      })[0].typeId;
      let res = await reqGetBrands(id);
      if (res.data.code == 0) {
        this.memories = res.data.data;
      }
    },
    //获取型号
    async getTypes() {
      try {
        let type_id = this.devices.filter((item) => {
          //笔记本
          return item.typeName == this.detail.pcVo.pcType;
        })[0].typeId;
        this.type_id = type_id;
        let res = await reqGetModels(type_id, this.detail.pcVo.pcBrand);
        if (res.data.code == 0) {
          this.models = res.data.data;
        }
      } catch (err) {
        console.log(err);
      }
    },
    // 获取cpu
    async getCPUs() {
      let id = this.devices.filter((item) => {
        return item.typeName == "CPU";
      })[0].typeId;

      let res = await reqGetCPUs(id);
      if (res.data.code == 0) {
        this.cpus = res.data.data;
      }
    },
    async open_addDialog(type) {
      this.addDialogTitle = type;
      let res = await reqGetSelectTypes(type);
      if (res.data.code == 0) {
        if (type == "硬盘") {
          this.disksOptions = res.data.data;
        }
        if (type == "内存") {
          this.memoryOptions = res.data.data;
        }
      }
      this.addDialogVisible = true;
    },
    //添加数量select改变
    addSelectChange(index) {
      this.disks.splice(index, this.disks.length - index);
      this.memorys.splice(index, this.memorys.length - index);
    },
    //添加内存或者硬盘的提交按钮
    async addBtnClick() {
      console.log("addBtnClick");

      // this.addDialogVisible = false;
      //让按钮失效,防止重复点击,2s后正常
      this.addBtnDisabled = true;
      setTimeout(() => {
        this.addBtnDisabled = false;
      }, 2000);
      if (this.addDialogTitle == "内存") {
        let params = {
          modelId: this.memorys.join(","),
          pcId: this.id,
        };
        const { data } = await reqAddMemory(params);

        if (data.code == 0) {
          this.addDialogVisible = false;
          this.getPcDetail();
        } else {
          this.$message.error(data.msg);
        }
      } else if (this.addDialogTitle == "硬盘") {
        let params = {
          pcId: this.id,
          modelId: this.disks.join(","),
        };
        const { data } = await reqAddDisk(params);
        if (data.code == 0) {
          this.addDialogVisible = false;
          this.getPcDetail();
        } else {
          this.$message.error(data.msg);
        }
      }
    },
    addDialogClose() {
      this.memoryCount = 0;
      this.diskCount = 0;
      this.memorys.splice(0, this.memorys.length);
      this.disks.splice(0, this.disks.length);
    },
  },
};
</script>

<style lang="less">
.pc {
  padding-top: 20px;
  img {
    display: block;
  }
  .red {
    color: red;
  }
  width: 1200px;
  margin: auto;
  margin-top: 10px;
  .el-row {
    height: 50px;
    display: flex;
    align-items: center;
  }

  .el-row:nth-child(2n + 1) {
    background-color: #dcdfe6;
  }
  .el-row:hover {
    background-color: #67c23a;
  }
  .el-row:nth-child(1) {
    background-color: #fff;
    color: green;
  }
  .el-select {
    width: 100%;
  }
}
</style>